/*
  订单详情
*/
<template>
  <div class="managegoods">
    <div class="listTop">
      <div class="Top1">订单管理-订单详情</div>
      <div class="Top2" disabled>
        <div></div>
        <ElStep
          :active="active"
          :stepList="stepList"
        ></ElStep>
      </div>
    </div>
    <div class="listCenter1">
      <div class="list1">
        <span>配送信息</span>
        <ul>
          <li>是否包邮：</li>
          <li>运费金额：{{detailsData.shipping_price}}</li>
          <li>配送方式：{{detailsData.shipping_name}}</li>
          <li>配送时间：等待配送</li>
          <li>收货信息：{{detailsData.addr}}</li>
          <li>买家昵称：{{detailsData.consignee}}</li>
          <li>买家手机号：{{detailsData.mobile}}</li>
        </ul>
      </div>
      <div class="list2">
        <span>订单状态：</span>
        <span v-if="detailsData.order_status==0">待付款</span>
        <span v-if="detailsData.order_status==1">待发货</span>
        <span v-if="detailsData.order_status==2">待收货</span>
        <span v-if="detailsData.order_status==3">已收货</span>
        <span v-if="detailsData.order_status==4">已完成</span>
        <span v-if="detailsData.order_status==5">取消</span>
        <span v-if="detailsData.order_status==6">申请退款</span>
        <ul>
          <li>
            <div class="sign">
              <div>
                <span>订单标记</span>
                <div v-if="detailsData.order_status==0||detailsData.order_status==1"  class="sign_red"></div>
                <div  v-if="detailsData.order_status==2" class="sign_green"></div>
                <div v-if="detailsData.order_status==4" class="sign_orange"></div>

              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="listCenter2" style="heigth:180px;">
      <div class="list1">
        <span>支付信息</span>
        <ul>
          <li>支付方式：{{detailsData.pay_name}}</li>
          <li>支付时间：{{detailsData.pay_time}}</li>
          <li>发票抬头：<span v-if="detailsData.invoice_title">{{detailsData.invoice_title}}</span></li>
        </ul>
      </div>
    </div>
    <div class="listCenter2">
      <div class="list1">
        <span>订单信息</span>
        <ul>
          <li>订单编号：{{detailsData.order_sn}}</li>
          <li>优惠券抵扣：{{detailsData.coupon_price}}</li>
          <li>商品总金额：{{detailsData.goods_price}}</li>
          <li>订单总金额：{{detailsData.total_amount}}</li>
          <li>用户备注：{{detailsData.user_note}}</li>
          <li>管理员备注：{{detailsData.admin_note}}</li>

        </ul>
      </div>
    </div>
    <div class="listBottom">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="商品" align="left" prop="">
          <template slot-scope="scope">
            <div class="goods">
              <img
                src="../../assets/img/a.jpg"
                alt="无法显示"
                title="商品信息"
                srcset=""
              />
              <div class="item">
                <div>{{ scope.row.goods_name }}</div>
                <div>数量：{{ scope.row.goods_num }}</div>
                <div>单价：￥{{ scope.row.goods_price }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goods_price" label="商品金额（元）" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import ElStep from "../../components/steps.vue";
export default {
  components: {
    ElStep,
  },
  data() {
    return {
      order_id:'',
      detailsData: "", // 前台数据
      val: "",
      active: "", // 完成的步骤序号
      stepList: [
        { name: "买家下单", index: 1, title: "20-04-08 17:11:04" },
        { name: "买家付款", index: 2, title: "20-04-08 17:11:04" },
        { name: "商家发货", index: 3, title: "20-04-08 17:11:04" },
        { name: "买家收货", index: 4, title: "20-04-08 17:11:04" },
        { name: "完成", index: 5, title: "20-04-08 17:11:04" },
      ],
      tableData: [
      //   {
      //     img: "../../assets/img/a.jpg",
      //     name: "纯棉加厚加不加价",
      //     quantity: "2",
      //     univalence: "0.00",
      //     amount1: "234",
      //     amount2: "3.2",
      //     amount3: 10,
      //   },
      //   {
      //     img: "",
      //     name: "运费",
      //     amount1: "165",
      //     amount2: "4.43",
      //     amount3: 12,
      //   },
      ],
    };
  },
  computed: {},
  methods: {
    // stepFunction(index) {
    //   this.active = index;
    //   this.goStep(this.active);
    // },
    goStep() {},
    // 表格合计行
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });
      return sums;
    },
    //订单详情
    list(){
      this.order_id = this.$route.query.order_id
      this.$axios({
        method: "post",
        url: "/Order/order_info",
        params:{
          order_id:this.order_id
        }
      }).then((res) => {
        console.log(res, "订单详情");
        this.detailsData = res.data.data
        this.tableData = res.data.data.goods
        this.active = res.data.data.order_status+1
        console.log(this.active,"1111")
        console.log(this.detailsData.shipping_name,'data')
      });
    }
  },
  mounted() {},
  created() {
    // this.detailsData = this.orderList; // 接口获取数据
    this.list()
  },
};
</script>
<style src="../../components/css/pay_css/orderdetails.css"  scoped></style>
<style scoped>
</style>